vue项目中使用multipart/form

2024-07-15 17:08| 来源: 网络整理| 查看: 265

在前面的博文里我说到了提交文件到文件服务器, 也说到了以base64格式上传文件,那么本文就讲下以文件流的形式提交文件数据

在我们的原生表单中,提交文件很简单, 只需要将 enctype设置为multipart/form-data就可以实现提交了,但是在vue项目中,使用elementui中的表单组件,就不能够通过设置enctype来实现了.

首先看一下我们的表单代码,如下:

点击上传保存

我是把文件选择,放到了表单外面处理了,这个无所谓,都可以

下面是文件选择器代码,如下:

已阅读并上传

注意,我这里因为不能直接显示文件选择器,而是要在点击阅读上传后,再打开文件选择,所以我这里使用了模拟点击,如果你是直接可以展示文件选择器,那么可以忽略这步. 代码如下:

// 模拟点击文件选择input toUploadFile(){ let btn = document.getElementById('unloadFile') btn.click() this.dialogVisible = false this.uploadPercent = 0 },

接着选择完文件之后,触发我们给input绑定的@change方法,代码如下:

// 选择文件 getFile(event, input_file_name) { this.formData.append("dataset_file", event.target.files[0]); this.proc = true let that = this setTimeout(function(){ that.uploadPercent = 100 },2000) },

此处event.target.files[0]就是我们的文件对象,dataset_file是后台要求的字段名,注意this.formData我是声明在了data的返回值中,是通过构造函数FormData创建出来的实例, 代码如下:

export default{ data(){ return { formData: new FormData(), } } }

接着就是表单的提交了,那你会问,那表单中写的数据怎么办,怎么使用,怎么提交,那下面的代码就是答案:

onSubmit() { this.formData.append("dataset_name", this.form.dataset_name); this.formData.append("describe", this.form.describe); this.formData.append("part_id", this.form.part_id); axioss.post('/datasets/', this.formData).then((r)=>{ this.$notify({ title: '成功', message: '这是一条成功的提示消息', type: 'success' }) this.$router.push({path:'/filemanage/data'}) }).catch(e=>{ this.$notify.error({ title: '失败', message: '创建数据集失败' }) }) },

就是把表单中的数据全部放到this.formData中,分号中为后台需要提供的字段名,后面为表单双向数据绑定拿到的值.

如果你使用的不是input type=file,而是使用elementui中的upload上传组件来做的话,那么在onChange的时候,有两个参数,file和fileList,在fileList的第一个子元素中,有一个raw属性,这个就是我们所需要的文件对象,和上面我们写的getFile中的event.target.files[0]拿到的值一样,接着操作就是和上面相同了

这就是全部内容,欢迎指正,探讨

【本文地址】

公司简介

联系我们